<!DOCTYPE html>
<html>
<head>
    <title>编辑卡密</title>
    {% include 'system/common/header.html' %}
</head>
<body>
    <form class="layui-form">
        <div class="mainBox">
            <div class="main-container">
                <div class="layui-form-item">
                    <input type="hidden" name="id" value="{{ kami.id}}">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="title" autocomplete="off"
                                placeholder="请使用英文字母，不可使用特殊字符" class="layui-input" value="{{ kami.name }}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">卡号</label>
                    <div class="layui-input-block">
                        <input type="text" name="card" lay-verify="title" autocomplete="off" placeholder="XXXX-XXXX-XXXX-XXXX"
                                class="layui-input" value="{{ kami.card }}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">卡密</label>
                    <div class="layui-input-block">
                      <input type="text" name="password" lay-verify="title" autocomplete="off" placeholder="XXXX-XXXXXXXXXXXXXX"
                              class="layui-input" value="{{ kami.password }}">
                    </div>
                </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                      <select name="status" aria-labelledby="status">
                        <option value="未使用" {% if kami.status == '未使用' %}selected{% endif %}>未使用</option>
                        <option value="生效中" {% if kami.status == '生效中' %}selected{% endif %}>生效中</option>
                        <option value="停用" {% if kami.status == '停用' %}selected{% endif %}>停用</option>
                        <option value="已过期" {% if kami.status == '已过期' %}selected{% endif %}>已过期</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">客户端UID</label>
                    <div class="layui-input-block">
                      <input type="text" name="uid" lay-verify="title" autocomplete="off" placeholder="软件/硬件唯一标识码UID"
                              class="layui-input" value="{{ kami.uid | safe}}">
                    </div>
                  </div>
                
                <div class="layui-form-item">
                  <label class="layui-form-label">有效期</label>
                  <div class="layui-input-block">
                    <input type="date" name="expire_time" lay-verify="title" autocomplete="off" placeholder="发布日期"
                            class="layui-input" value="{{ kami.expire_time | safe }}">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">发卡时间</label>
                  <div class="layui-input-block">
                    <input type="date" name="create_time" lay-verify="title" autocomplete="off" placeholder="发布日期"
                            class="layui-input" value="{{ kami.create_time | safe }}" readonly >
                  </div>
                </div>
                <div class="layui-form-item">
                  <!-- 显示二维码 卡密信息 -->
                  <!-- <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script> -->
                  <label class="layui-form-label">卡密信息</label>
                  <div class="layui-input-block">
                    <div id="qrcode"></div>
                    <script>
                      card = document.querySelector('input[name="card"]').value;
                      password = document.querySelector('input[name="password"]').value;
                      // 生成二维码
                      var qrcode = new QRCode(document.getElementById("qrcode"), {
                        text: "card: " + card + "\npassword: " + password,
                        width: 128,
                        height: 128,
                    })
                    </script>
                  </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="kami-update">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
{% include 'system/common/footer.html' %}
<script>
    layui.use(['form', 'jquery'], function () {
      let form = layui.form
      let $ = layui.jquery
      
      // let MODULE_PATH = '/admin/system/kami/'
      let MODULE_PATH = "{{ url_for('system.kami.main') }}"
      form.on('submit(kami-update)', function (data) {
        let loading = layer.load()
        let formData = data.field;
        $.ajax({
          url: MODULE_PATH + 'update',
          data: JSON.stringify(data.field),
          dataType: 'json',
          contentType: 'application/json',
          type: 'post',
          success: function (result) {
            layer.close(loading)
            if (result.success) {
              layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name))//关闭当前页
                parent.layui.table.reload('kami-dataTable')
              })
            } else {
              layer.msg(result.msg, { icon: 2, time: 1000 })
            }
          }
        })
        // console.log(data.field)
        return false
      })
    })
  </script>
</body>
</html>